<script lang="ts" setup>
import type { TColumn } from '~/components/table';

type TInfo = Api.GetDataItem<typeof apis.apiInviteChannel>[];

defineProps<{
  info: TInfo;
}>();
defineEmits<{
  setCommission: [userId: string];
}>();

const tableColumn = computed(() => {
  const column: TColumn[] = [
    { key: 'name', name: $t('cnbWGq4PuUxb3Joqjk6tS'), tdClass: 'relative' },
    { key: 'referrals', name: $t('zmCZyLtncPIch0JvpNhr') },
    { key: 'profit', name: $t('t6EaBaE5rr17Spu0w8gB') },
    { key: 'link', name: $t('nUj0W3DPxcotAmoLfyk') },
    { key: 'code', name: $t('xyBc6p8NcXZme26ZMocNe') },
    { key: 'operate', name: '', thClass: 'text-right' },
  ];
  return column;
});
function deleteCampaign(info: any) {
  if (info.is_default) {
    antdModal.confirm({
      content: $t('8C_8meb9jrl9Xzxzx8Lmy'),
      class: 'ant-cover__confirm-modal',
      centered: true,
      okCancel: false,
    });
    return;
  }

  antdModal.confirm({
    content: $t('s7xVl9WrKhp62L4nQjk'),
    class: 'ant-cover__confirm-modal',
    centered: true,
    async onOk() {
      await apis.apiInviteDeleteChannel(
        { requestBody: { channel_id: info.channel_id } },
        { successMessage: $t('zsaLk1KtXyRrJmdsq5Jo2') },
      );
      queryClient.invalidateQueries({
        queryKey: [apis.apiInviteChannel.id],
        exact: false,
      });
    },
  });
}
</script>

<template>
  <TTable indexId="channel_id" :columns="tableColumn" :data="info">
    <template #name-td="{ row }">
      <div v-if="row.is_default" class="absolute transform-origin-center-left scale-80 rounded-2 rounded-bl-0 bg-green-500 px-2 py-1 text-xs -top-2">
        {{ $t('q9Zw2lmLqFkf1yUDi7FXn') }}
      </div>
      <div class="cursor-pointer" @click="globalPopups.modCampaign.open({ id: row.channel_id })">
        <span>{{ row.name }}</span>
        <i class="i-ri:edit-2-fill ml-1 text-1.2em" />
      </div>
      {{ $t('mpfV0uNyygTUc8UvPbfo3') }} {{ $d(row.create_time, 'full') }}
    </template>
    <template #referrals-td="{ row }">
      {{ row.reg_count }}
    </template>
    <template #profit-td="{ row }">
      <TAmount :value="row.profit_amount" symbol="$" iconPos="left" format="pad-dec" :decimals="6" />
    </template>
    <template #link-td="{ row }">
      <div class="flex gap-1">
        <span v-if="!envs.isTg">Tg：</span>{{ desensitize(row.telegram_invite_url, 10, 10) }}
        <TCopy :source="row.telegram_invite_url" :nthParent="1" />
      </div>
      <div v-if="!envs.isTg" class="flex gap-1">
        <span>Web：{{ desensitize(row.web_invite_url, 10, 10) }}</span>
        <TCopy :source="row.web_invite_url" :nthParent="1" />
      </div>
    </template>
    <template #code-td="{ row }">
      <div class="flex gap-1">
        <span>{{ desensitize(row.referral_code, 10, 10) }}</span>
        <TCopy :source="row.referral_code" />
      </div>
    </template>
    <template #operate-td="{ row }">
      <div class="row-span-2 flex justify-end text-xl text-sys-text-body *:ml-1 *:size-7 *:flex-center *:cursor-pointer">
        <div
          class="active:scale-90 hover:text-sys-text-head"
          @click="globalPopups.referralShare.open({ code: row.referral_code, url: envs.isTg ? row.telegram_invite_url : row.web_invite_url })"
        >
          <i class="i-ion:ios-share-alt" />
        </div>
        <div
          v-if="!row.is_default"
          class="active:scale-90 hover:text-sys-text-head"
          @click="deleteCampaign(row)"
        >
          <i class="i-ion:md-trash" />
        </div>
        <div
          class="active:scale-90 hover:text-sys-text-head"
          @click="globalPopups.dtlcampaign.open({ info: row })"
        >
          <i class="i-ri:eye-line" />
        </div>
      </div>
    </template>
  </TTable>
</template>
